<!--  -->
<template>
  <div class='outsideBox'>
    <div class='innerBox'>
      <div class="left">
        <h5 class="title">
          设备列表
        </h5>
        <div class="search">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="content">
          <div class="dataList" v-for="(item,index) in setViewList" :key="index">
            <el-checkbox :disabled="isDisbale" @change="changeChecked(item)" v-model="item.ischecked">{{ item.name }}</el-checkbox>
          </div>
        </div>
        <div class="pagetion">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.page"
              :page-size="pagination.pageSize"
              layout="total, prev, pager, next"
              :total="pagination.total">
            </el-pagination>
        </div>
      </div>
      <div class="middle">
        <div class="innerButton">
          <div :class="checkedToLeftList.length === 0 ? 'toLeft' : 'haveCheckedLeft'" @click="toLeftFun(checkedToLeftList.length)">
            <i class="el-icon-d-arrow-right" v-show="checkedToLeftList.length === 0"></i>
            <i class="el-icon-d-arrow-right" style="color: #fff;" v-show="checkedToLeftList.length > 0"></i>
          </div>
          <div :class="goBackLeft.length === 0 ? 'toRight' : 'haveCheckedRight'" @click="comeBackFun(goBackLeft.length)">
            <i class="el-icon-d-arrow-left" v-show="goBackLeft.length === 0"></i>
            <i class="el-icon-d-arrow-left" style="color: #fff;" v-show="goBackLeft.length > 0"></i>
          </div>
        </div>
      </div>
      <div class="right">
        <h5 class="title">
          设备组合列表
        </h5>
        <div class="search">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="content">
          <div class="dataList" v-for="(item,index) in checkedToRightList" :key="index">
            <el-checkbox :disabled="isDisbale" @change="changeGoBackFun(item)" v-model="item.ischecked">{{ item.name }}</el-checkbox>
          </div>
        </div>
      </div>
    </div>
    <div class="autherBox">
      <div class="contentBox">
        <h5>
          设备组合列表信息
        </h5>
        <el-form ref="formName" :disabled="isDisbale" :model="deviceGroup" :rules="groupRule" label-width="80px">
          <el-form-item label="设备名称" prop="componentName">
            <el-input v-model="deviceGroup.componentName"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="deviceGroup.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" v-show="!isDisbale">修 改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { deviceComponentUpdate } from '@/api/deviceComponent'
import { deviceList } from '@/api/device'
export default {
  props: {
    isDisbale: {
      type: Boolean,
      default: true
    }
  },
  watch: {

  },
  data () {
    // 这里存放数据
    return {
      deviceGroup: {
        componentName: '',
        remark: ''
      },
      groupRule: {
        componentName: [
          { required: true, trigger: 'blur', message: '请输入设备名称' }
        ]
      },
      showList: [],
      pagination: {
        page: 1,
        pageSize: 5,
        total: 0
      },
      input: '',
      checked: false,
      copyObj: [],
      checkedToLeftList: [],
      checkedToRightList: [],
      goBackLeft: [],
      setViewList: [],
      saveData: []
    }
  },
  // 方法集合
  methods: {
    changeViewList () {
      this.pagination.total = this.saveData.length
      this.setViewList = this.saveData.slice(0, this.pagination.pageSize)
    },
    // 提交
    onSubmit () {
      const deviceListArr = this.checkedToRightList
      const deviceList = []
      if (deviceListArr.length < 1) {
        this.$alert('设备列表为空', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
        return
      } else {
        for (const el of deviceListArr) {
          deviceList.push(el.id)
        }
      }
      this.$refs.formName.validate((valid) => {
        if (valid) {
          const requestObj = {
            componentId: this.componentId,
            componentName: this.deviceGroup.componentName,
            remark: this.deviceGroup.remark,
            deviceList
          }
          deviceComponentUpdate(requestObj).then(res => {
            if (res.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('closePopup')
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        }
      })
    },

    // 获取原始列表
    getLeftList () {
      const res = JSON.parse(sessionStorage.getItem('toUpdetaData'))
      this.checkedToRightList = res.deviceList
      this.deviceGroup.componentName = res.componentName
      this.deviceGroup.remark = res.remark
      this.componentId = res.id
      const obj = {
        // kw: this.FindFromForDevice.kw,
        limit: this.pagination.pageSize,
        page: this.pagination.page
      }
      deviceList(obj).then(res => {
        if (res.code === '200') {
          const innerobj = {
            // kw: this.FindFromForDevice.kw,
            limit: res.data.total,
            page: this.pagination.page
          }
          deviceList(innerobj).then(res => {
            const arr = res.data.records
            const nullArr = []
            for (const el of arr) {
              el.ischecked = false
              nullArr.push(el)
            }
            const setArr = []
            for (const el of nullArr) {
              let flag = true
              for (const j of this.checkedToRightList) {
                if (el.id === j.id) {
                  flag = false
                }
              }
              if (flag) {
                setArr.push(el)
              }
            }
            this.saveData = setArr
            this.changeViewList()
          })
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    comeBackFun (val) {
      if (val === 0) {
        return false
      } else {
        const nullArr = []
        const gobackArr = []
        for (const el of this.checkedToRightList) {
          let flag = true
          for (const j of this.goBackLeft) {
            if (el.id === j.id) {
              flag = false
            }
          }
          if (flag) {
            nullArr.push(el)
          }
          if (!flag) {
            gobackArr.push(el)
          }
        }
        for (const el of gobackArr) {
          el.ischecked = false
          this.saveData.push(el)
        }
        this.checkedToRightList = nullArr
        this.goBackLeft = []
        this.changeViewList()
      }
    },
    toLeftFun (val) {
      if (val === 0) {
        return false
      } else {
        const nullArr = []
        for (const el of this.saveData) {
          let flag = true
          for (const j of this.checkedToLeftList) {
            if (el.id === j.id) {
              flag = false
            }
          }
          if (flag) {
            nullArr.push(el)
          }
        }
        this.saveData = nullArr
        for (const el of this.checkedToLeftList) {
          el.ischecked = false
          this.checkedToRightList.push(el)
        }
        this.checkedToLeftList = []
        this.changeViewList()
      }
    },
    // 分页
    handleCurrentChange (val) {
      this.setViewList = this.saveData.slice(((this.pagination.pageSize * val) - this.pagination.pageSize), this.pagination.pageSize * val)
    },
    changeGoBackFun (val) {
      if (!val.ischecked) {
        const arr = this.goBackLeft
        this.goBackLeft = arr.filter(item => {
          return item.id !== val.id
        })
      } else {
        this.goBackLeft.push(val)
      }
    },
    changeChecked (val) {
      if (!val.ischecked) {
        const arr = this.checkedToLeftList
        this.checkedToLeftList = arr.filter(item => {
          return item.id !== val.id
        })
      } else {
        this.checkedToLeftList.push(val)
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  mounted () {
    this.getLeftList()
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.outsideBox {
  width: 99%;
  height: 80vh;
  display: flex;
  background-color: #ededed;
  border-radius: 10px;
}
.innerBox {
  width: 68%;
  padding: 1% 1%;
  height: 98%;
  display: flex;
  overflow: hidden;
  background-color: #ededed;
  div {
    height: 100%;
    background-color: #fff;
  }
  .left {
    width: 43%;
    border: 1px solid rgba($color: #000000, $alpha: .3);
    border-radius: 5px;
    padding: 0 1%;
    .title {
      width: 100%;
    }
    .search {
      width: 80%;
      height: 8%;
    }
    .content {
      width: 90%;
      height: 70%;
      .dataList {
        display: flex;
        height: 60px;
        line-height: 80px;
        margin: 3px 0;
        background-color: #fff;
      }
    }
    .pagetion {
      height: 8%;
      margin-top: 4%;
      width: 100%;
    }
  }
  .middle {
    width: 13%;
    padding: 0 1%;
    position: relative;
    .innerButton {
      text-align: center;
      width: 90%;
      height: 100px;
      position: absolute;
      top: 50%;
      transform: translateY(-50px);
      left: 5%;
      .toRight,.toLeft {
        width: 100%;
        height: 48px;
        line-height: 50px;
        background-color: #ededed;
        border-radius: 5px;
      }
      .haveCheckedLeft,.haveCheckedRight {
        width: 100%;
        height: 48px;
        line-height: 50px;
        background-color: #0b20d8;
        border-radius: 5px;
      }
      :nth-child(1) {
        margin-bottom: 4px;
      }
    }
  }
  .right {
    width: 40%;
    border: 1px solid rgba($color: #000000, $alpha: .3);
    border-radius: 5px;
    .title {
      width: 100%;
    }
    .search {
      width: 80%;
      height: 8%;
    }
    .content {
      width: 90%;
      height: 70%;
      overflow-y: scroll;
      .dataList {
        display: flex;
        height: 60px;
        line-height: 80px;
        margin: 3px 0;
        background-color: #fff;
      }
    }
  }
}
.autherBox {
  width: 30%;
  height: 98%;
  padding: 1% 1%;
  background-color: #ededed;
  .contentBox {
    width: 98%;
    height: 100%;
    border: 1px solid rgba($color: #000000, $alpha: .3);
    border-radius: 5px;
    padding: 0 1%;
    background-color: #fff;
  }
}
</style>
